<template>
  <Modal class="zl-text-edit-box"
      v-model="showModal"
      title="文本编辑器"
      :width="900"
      :auto-close="false"
      :mask-closable="false">
      <div class="zl-text-edit-box-content">
        <div class="zl-text-edit-box-setting">
          <div class="f-l" >
            字体样式
          </div>
          <div class="f-l m-l-20">
            <RadioGroup v-model="editBox.fontStyle" @on-change="fontStyleSetting">
                <Radio label="automatic">自动</Radio>
                <Radio label="customize">自定义</Radio>
            </RadioGroup>
          </div>
          <div class="f-l m-l-20 zl-text-edit-box-setting-customize" v-if="editBox.fontStyle === 'customize'">
            <Select v-model="editBox.fontType" style="width:100px" @on-change="fontTypeSelect">
                <Option v-for="(item, index) in fontTypeList" :value="item.name" :key="index">{{ item.val }}</Option>
            </Select>
            <Select v-model="editBox.fontSize" style="width:80px;" class="m-l-10" placeholder="字号" @on-change="fontSizeSelect">
                <Option v-for="(item, index) in fontSizeList" :value="item" :key="index">{{ item }}</Option>
            </Select>
            <ColorPicker v-model="editBox.fontColor" @on-change="colorSelect" class="m-l-10" />
            <div class="m-l-10 zl-text-edit-box-align">
              <RadioGroup v-model="editBox.textAlign" @on-change="textAlignSelect">
                  <Radio label="left"><span>居左</span></Radio>
                  <Radio label="center"><span>居中</span></Radio>
                  <Radio label="right"><span>居右</span></Radio>
              </RadioGroup>
            </div>
            <div class="zl-text-edit-box-other m-l-20">
              <a class="m-r-15 other-select" @click="showOtherB"><b>B</b></a>
              <a class="m-r-15 other-select" @click="showOtherI"><i>&nbsp;I&nbsp;</i></a>
              <a class="m-r-15 other-select" @click="showOtherU"><u>U</u></a>
            </div>
          </div>
          <div class="f-r m-r-10">
            <Poptip placement="bottom-end">
              <a title="写入功能"><Icon type="ios-more" /></a>
              <div slot="content" style="height:80px">
                <div>
                  <Input v-model="search" placeholder="搜索" @on-change="searchChange">
                      <a slot="prepend"><Icon type="ios-search" /></a>
                  </Input>
                </div>
                <div class="m-t-10">
                  <div style="display:inline-block" class=" m-r-10" v-for="(item, index) in xieruList" :key="index">
                    <!-- <a @click="xieru(item)">{{item.kpiName}}</a> -->
                      <Poptip trigger="hover" placement="bottom-start" ref="poptip">
                          <a @click="xieru(item,'SUM')">{{item.kpiName}} <span class="zlstbd-icon-setting m-l-5"></span></a>
                          <div slot="content" class="poptip-content">
                              <ul>
                                  <li @click="xieru(item,'SUM')">
                                      <p>求和</p>
                                  </li>
                                  <li @click="xieru(item,'SVG')">
                                      <p>求平均值</p>
                                  </li>
                                  <li @click="xieru(item,'MAX')">
                                      <p>求最大值</p>
                                  </li>
                                  <li @click="xieru(item,'MIN')">
                                      <p>求最小值</p>
                                  </li>
                              </ul>
                          </div>
                      </Poptip>
                  </div>
                </div>
              </div>
            </Poptip>
          </div>
        </div>
        <div class="zl-text-edit-box-text">
            <div id="editor" type="text/plain" style="width:100%;"></div>
            <div id="dataDisplay" style="display:none;"></div>
        </div>
      </div>
      <div slot="footer">
          <!-- <Button class="f-l" @click="restoreDefaults">恢复默认值</Button> -->
          <Button type="warning" @click="cancel">取消</Button>
          <Button type="primary" @click="save">保存</Button>
      </div>
  </Modal>
</template>
<script>
import util from  'util'
import getData from 'getData'
import '../../../static/utf8-jsp/ueditor.config'
import '../../../static/utf8-jsp/ueditor.all'
import '../../../static/utf8-jsp/lang/zh-cn/zh-cn'
// const cheerio = require('cheerio')

export default {
  props:{
    graphOptions: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data() {
    return {
      showModal: false,
      editBox: {
        // 数据
        uedata: [],
        fontStyle: 'automatic',
        fontType: 'yahei',
        fontSize: 14,
        fontColor: '#000000',
        textAlign: 'center',
      },
      fontTypeList: [
        { name: 'songti', val: '宋体,SimSun'},
        { name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
        { name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
        { name: 'heiti', val: '黑体, SimHei'},
        { name: 'lishu', val: '隶书, SimLi'},
        { name: 'andaleMono', val: 'andale mono'},
        { name: 'arial', val: 'arial, helvetica,sans-serif'},
        { name: 'arialBlack', val: 'arial black,avant garde'},
        { name: 'comicSansMs', val: 'comic sans ms'},
        { name: 'impact', val: 'impact,chicago'},
        { name: 'timesNewRoman', val: 'times new roman'}
      ],
      fontSizeList: [10, 11, 12, 14, 16, 18, 20, 24, 36, 48, 60],
      // 搜索框查询条件
      search: '',
      // 所有指标值
      indicatorAll: [],
      ue: '',
      xierudata: [],
      xieruList: [],
    }
  },
  methods:{
    // 显示 文本编辑框
    show(){
      this.showModal = true
      this.init()
      // 查询当前页的所有 指标 然后进行前端过滤
      //反显
      if(this.graphOptions.others.editBox != null){
          // 判断 样式设置是否存在
          this.editBox = this.graphOptions.others.editBox
        }
      this.queryIndicator()
    },
    // 选择汇总方式 写入  默认 求和
    xieru(item,type){
      // a标签 style用来区分是否 为自定义插入的文本  class用来区分汇总方式  title用来区分指标的ID catalogId
      let stringHtml = '<a style="background:#e3e3e3" class="indicator" data-target="' + type + '" code-target="' + item.kpiCode + '" title="' + item.kpiName + '">' + item.kpiName + '</a>'
      // 把 html字符串 写入 文本编辑器中
      UE.getEditor('editor').execCommand('inserthtml', stringHtml)
    },
    // 查询出数据进行 汇总
    quireSummary(type, kpiCode,o){
      let _this = this
      getData.get('getKpiValuesByDimeAndKpiCode', {params: {kpiCode}}).then((res) => {
        if (res.status == 200 && res.data.resultCode == 0) {
          if (res.data.data.length === 1) {
            // 无数据
            return
          }
          // 删除 第一组的字段数据
          let data = res.data.data.slice(1)
          let summaryValue = 0
          let sum = 0
          let min = 0
          let max = 0
          for(let i = 0; i < data.length; i++){
            let item = data[i]
            if (item.length === 2) {
              if (type === 'MIN') {
                if (i === 0) {
                  min = parseFloat(item[1])
                } else {
                  min > parseFloat(item[1]) && (min = parseFloat(item[1]))
                }
              } else if (type === 'MAX') {
                max < parseFloat(item[1]) && (max = parseFloat(item[1]))
              } else {
                sum += parseFloat(item[1])
              }
            }
          }
          if (type === 'SUM') {
            summaryValue = sum
          } else if (type === 'SVG') {
            summaryValue = (sum / data.length).toFixed(2)
          } else if (type === 'MIN') {
            summaryValue = min
          } else if (type === 'MAX') {
            summaryValue = max
          }
          $(o).text(summaryValue)
        }
      })
    },
    // 保存 attr
    save () {
      let _this = this
      let data = UE.getEditor('editor').getContent()
      // 先去掉 id="dataDisplay"的标签下的html
      $('#dataDisplay').html('')
      // 把文本编辑器中的数据 添加到 id="dataDisplay"的标签下
      $('#dataDisplay').html(data)
      // 利用jquery获取  循环自定定义写入的数据
      $('a.indicator').each(function(i, o){
        // 获取汇总方式
        let type = $(o).attr('data-target')
        // 获取id 方便计算值
        let kpiCode = $(o).attr('code-target')
        // 这个方法中使用了 异步请求  导致了  html数据获取延时了
        _this.quireSummary(type,kpiCode,o)
      })
      // 设置定时器  一秒后执行后续操作 保证前面的 异步请求处理完毕了
      setTimeout(() => {
        let valueHtml = $('#dataDisplay').html()
        let textConfiguration = {
          value: valueHtml,
          editBox: _this.editBox
        }
        _this.$emit('changeText', textConfiguration)
        _this.showModal = false
      }, 1000)
      // let dataHtml = UE.htmlparser(data, true);
      // console.log(dataHtml)
      // if(dataHtml.type === 'root'){
      //   let rootChildren = dataHtml.children
      //   this.analysisRootHtml(rootChildren)
      // }else{
      //   console.log('解析的为 非root节点')
      // }

      /* 以下方法只适用 不改变文本编辑器中的样式
      for(let i = 0; i < dataHtml.children.length; i++){
        if(dataHtml.children[i].type === 'element'){
          // 表示节点类型为 element 类型
          let children = dataHtml.children[i].children
          // 循环节点类型为 element的数据
          let textChildren = '' // 最终的纯文本数据
          for(let j = 0; j < children.length; j++){
            // 再次碰到节点类型为 text 则表示此节点为文本数据
            if(children[j].type === 'text'){
              textChildren += children[j].data
            }else{ // 否则需判断 是何 标签
              if(children[j].tagName === 'a'){
                // a 标签则为 自己插入的标签 根据规则解析
                textChildren += this.analyticalWrite(children[j].children[0].data)
              }else if(children[j].tagName === 'span'){
                // span 标签则为添加样式时自行添加 直接解析
                textChildren += children[j].children[0].data
              }else{
                // 其他标签 暂时不解析
                console.log('br')
              }
            }
          }
          // 解析一行<p>标签的数据
          this.editBox.uedata.push(textChildren)
        }else{
          // 表示节点类型为 text类型
          this.editBox.uedata.push(dataHtml.children[i].data)
        }
      }
      let textConfiguration = this.editBox
      this.showModal = false
      this.$emit('changeText', textConfiguration) */

    /* 取出 最终的数据方法
    // 解析 root 节点
    analysisRootHtml (rootChildren) {
      let listString = new Array()
      for(let i = 0; i < rootChildren.length; i++){
        if(rootChildren[i].type === 'element'){
          // 表示节点类型为 element 类型
          let elementChildren = rootChildren[i].children
          listString.push(this.analysisElementHtml(elementChildren))
        }else{
          // 当节点类型为 text时  取出data数据
          listString.push(rootChildren[i].data)
        }
      }
      console.log(listString)
    },
    // 解析 element 节点
    analysisElementHtml(elementChildren){
      let strings = ''
      for(let i = 0; i < elementChildren.length; i++){
        if(elementChildren[i].type === 'element'){
          // 表示节点类型为 element 类型
          let children = elementChildren[i].children
          if(children != null){
            strings += this.analysisElementHtml(children)
          }
        }else{
          // 当节点类型为 text时  取出data数据
          strings += elementChildren[i].data
        }
      }
      return strings
    }, */
    },
    // 解析 root 节点
    analysisRootHtml (rootChildrens) {
      let listString = new Array()
      for(let i = 0; i < rootChildrens.length; i++){
        let editBoxObject = new Object()
        if(rootChildrens[i].type === 'element'){
          // 表示节点类型为 element 类型
          editBoxObject = this.analysisPHtml(rootChildrens[i],editBoxObject)
        }else{
          // 当节点类型为 text时  取出data数据
          editBoxObject.textValue = rootChildrens[i].data
        }
        listString.push(editBoxObject)
      }
      console.log(listString)
    },
    // 解析 p 节点
    analysisPHtml(rootChildren,editBoxObject){
      if(rootChildren.tagName === 'p'){
        // 判断 对齐方式
        if(rootChildren.attrs.style.includes('left')){
          editBoxObject.textAlign = 'left'
        }else if(rootChildren.attrs.style.includes('right')){
          editBoxObject.textAlign = 'right'
        }else {
          editBoxObject.textAlign = 'center'
        }
      }
      let pChildrens = rootChildren.children
      // 进行 判断 是否存在 子节点
      let data = new Array()
      if(pChildrens != null || pChildrens.length > 0){
        for(let i = 0; i < pChildrens.length; i++){
          let pObjct = new Object()
          data.push(this.analysisElementHtml(pChildrens[i],pObjct))
        }
        editBoxObject.data = data
      }
      return editBoxObject
    },
    // 解析 未知子节点
    analysisElementHtml(pChildren, pObjct){
      // 判断是否 最终子节点 text表示最终子节点  element表示还存在其它子节点
      if(pChildren.type === 'element'){
        // 判断 是否存在加粗 标签  1存在 0不存在
        if(pChildren.tagName === 'strong'){
          pObjct.fontB = 1
        }else{
          pObjct.fontB = 0
        }
        // 判断 是否存在斜体 标签  1存在 0不存在
        if(pChildren.tagName === 'em'){
          pObjct.fontI = 1
        }else{
          pObjct.fontI = 0
        }
        // 表示存在样式
        if(pChildren.tagName === 'span'){
          if(pChildren.attrs.style != null || pChildren.attrs.style !== ''){
            let str = pChildren.attrs.style
            let styleObjct = this.styleAnalysis(str)
            // 字体样式  需解析
            if(styleObjct.fontFamily != null || styleObjct.fontFamily !== ''){
              console.log('可行')
            }
            // 下划线样式
            if(styleObjct.textDecoration != null || styleObjct.textDecoration !== ''){
            }
            // 字体颜色
            if(styleObjct.color != null || styleObjct.color !== ''){
            }
            // 字体大小
            if(styleObjct.fontSize != null || styleObjct.fontSize !== ''){
            }
          }
        }
        // 当判断 标签为 a标签时  进行 自定义规则解析
        if(pChildren.tagName === 'a'){
          console.log('自定义a标签解析规则')
        }
        let elementChildrens = pChildren.children
        // 进行 判断 是否存在 子节点
        if(elementChildrens != null || elementChildrens.length > 0){
          for(let i = 0; i < elementChildrens.length; i++){
            pObjct = this.analysisElementHtml(elementChildrens[i],pObjct)
          }
        }
      }else {
        // 为 text 直接获取值
        pObjct.textValue = pChildren.data
      }
      return pObjct
    },
    // 样式解析
    styleAnalysis(str){
      let strArray = str.split(';')
      let styleObjct = new Object()
      // 判断 样式字符串中是否存在 样式值
      if(strArray != null || strArray.length > 0){
        // 循环 样式数组
        for(let i = 0; i < strArray.length; i++){
          // 判断分割时产生的空值
          if(strArray[i] !== ''){
            let strObjct = strArray[i].split(':')
            let key = strObjct[0].trim()
            let value = strObjct[1].trim()
            styleObjct[key] = value
          }
        }
      }
      return styleObjct
    },

    // 取消 文本编辑框
    cancel () {
      this.showModal = false
      UE.getEditor('editor').execCommand('cleardoc')
    },
    // 字体选择
    fontSizeSelect(value) {
      console.log(value)
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('fontsize', value + 'px')
    },
    // 颜色选择  不选择默认 #000
    colorSelect(value){
      console.log(value)
      if(value === '' || value == null){
        // 设置 与 文本编辑器同步
        UE.getEditor('editor').execCommand('forecolor', '#000')
      }else{
        UE.getEditor('editor').execCommand('forecolor', value)
      }
    },
    // 字体样式选择
    fontTypeSelect(value){
      console.log(value)
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('fontfamily', value)
    },
    // 对齐方式选择
    textAlignSelect(value){
      console.log(value)
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('justify', value)
    },
    // 是否加粗
    showOtherB() {
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('bold')
    },
    // 是否 斜体
    showOtherI() {
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('italic')
    },
    // 是否加下划线
    showOtherU() {
      // 设置 与 文本编辑器同步
      UE.getEditor('editor').execCommand('underline')
    },
    // 字体样式设置
    fontStyleSetting(){
      let _this = this
      console.log(_this.editBox.fontStyle)
    },
    // 恢复初始化设置
    restoreDefaults(){
      // 获取 文本编辑器中数据
      let dataContent = new Array()
      dataContent.push(UE.getEditor('editor').getContent())
      console.log(dataContent)
      // 获取 纯文本数据 保留段落格式
      let ueDataPlain = new Array()
      ueDataPlain.push(UE.getEditor('editor').getPlainTxt())
      console.log(ueDataPlain)
      // 获取纯文本数据 不保留段落格式
      let ueDataContentTxt = new Array()
      ueDataContentTxt.push(UE.getEditor('editor').getContentTxt())
      console.log(ueDataContentTxt)
      // 获取纯文本数据 不保留段落格式
      let ueDataHtml = new Array()
      ueDataHtml.push(UE.getEditor('editor').getAllHtml())
      console.log(ueDataHtml)
    },
    // 解析 写入的 标签
    analyticalWrite(value){
      console.log(value)
      return ' 43512 '
    },

    init() {
      var _this = this
      // 创建 文本编辑器
      this.ue = UE.getEditor('editor',{
        BaseUrl: '',
        UEDITOR_HOME_URL: 'static/utf8-jsp/',
        initialFrameHeight:400,
        zIndex: 0,
        // 设置 工具栏是否显示
        // autoFloatEnabled: false,
        // 回车替换  默认'p'
        // enterTag: 'br'
      })
      // 创建 editor 后 触发该事件 进行文本编辑框的设置
      this.ue.ready(function(){
        // 内容反显
        if(_this.graphOptions.others.value != null && _this.graphOptions.others.value != ''){
          // 判断 存在内容  先清理文本编辑器中的内容  然后重新写入
          UE.getEditor('editor').execCommand('cleardoc')
          let other = util.util.cloneObj(_this.graphOptions.others)
          let stringHtml = other.value
          // 先去掉 id="dataDisplay"的标签下的html
          $('#dataDisplay').html('')
          // 把文本编辑器中的数据 添加到 id="dataDisplay"的标签下
          $('#dataDisplay').html(stringHtml)
          // 加 id 保证  text图表显示地方不会被篡改
          $('#dataDisplay a.indicator').each(function(i, o){
            // 替换其中的 数值为原始值
            let title = $(o).attr('title')
            $(o).text(title)
          })
          let replaceHtml = $('#dataDisplay').html()
          UE.getEditor('editor').execCommand('inserthtml', replaceHtml)
        }
        // 设置 文本编辑器创建后  内容格式居中对齐
        UE.getEditor('editor').execCommand('justify', 'center')
      })
      this.ue.addListener('contentChange',function(){
        // 内容监听 敲击回车  内容格式居中对齐
        UE.getEditor('editor').execCommand('justify', _this.editBox.textAlign)
        // 以下方法 敲击回车键后 不执行 格式居中
        // UE.dom.domUtils.on(UE.getEditor('editor').body,'keyup',function(evt){
        //     //evt为事件对象，this为被点击元素对象
        //     if(evt.keyCode === 13){
        //       UE.getEditor('editor').execCommand('justify', _this.editBox.textAlign)
        //     }
        // })
      })

    },
    // 查询 指标 并进行过滤
    queryIndicator() {
      let catalogType = {
        catalogTypeName: this.$route.query.catalogTypeName,
        catalogType: this.$route.query.catalogType,
        catalogName: this.$route.query.catalogName,
        catalogId: this.$route.query.catalogId
      }
      getData.get('findByKpiTypeAndCatalogId', {
        params: {
          kpiType: 'BUSI',
          catalogId: catalogType.catalogId
        }
      }).then((result) => {
        if (result.data && result.data.resultCode === 0) {
          this.indicatorAll = result.data.data
          this.searchChange()
        }
      })
    },
    // 搜索框中的值改变 就触发
    searchChange() {
      if(this.search === '' || this.search == null){
        // 当输入框中没有值时  判断指标是否有值 有值则把第一条值赋值展示
        if(this.indicatorAll.length > 0){
          let listTemp = new Array()
          listTemp.push(this.indicatorAll[0])
          this.xieruList = listTemp
        }
      }else{
        // 当输入框中有值时 过滤所有的指标
        let listTemp = new Array()
        for(let i = 0; i < this.indicatorAll.length; i++){
          // 判断 条件是否满足
          if(this.indicatorAll[i].kpiName.includes(this.search)){
            listTemp.push(this.indicatorAll[i])
          }
        }
        this.xieruList = listTemp
      }
    }
  },
  beforeDestroy(){
    // 关闭模态框时 删除 文本编辑器 的实例 便于下次重新创建
    UE.delEditor('editor')
  }
  // 挂载 存在问题  第二次打开模态框时 文本编辑器 并不会重新创建
  // mounted() {
  //   this.init()
  // }
}
</script>
<style lang="less">
.zl-text-edit-box{
  .zl-text-edit-box-setting-customize{
    .ivu-color-picker-confirm{
      .ivu-input-wrapper{
        width: 130px
      }
    }
  }
}
</style>
<style lang="less" scoped>
.zl-text-edit-box{
  .zl-text-edit-box-content{
    .zl-text-edit-box-setting{
      height:34px;
      line-height:34px;
      .zl-text-edit-box-other{
          float: right;
          height: 34px;
          line-height: 34px;
          .other-select:hover{
            background: #224792;
            color: white;
          }
      }
      .zl-text-edit-box-align{
          float: right;
          height: 34px;
          line-height: 34px;
      }
    }
    .zl-text-edit-box-text{
      margin-top: 10px;
      width: 100%;
    }
  }
}
</style>
